<template>
  <div :loading="loading">
    <el-dialog :visible="showSettingInternal"
               width="50%"
               :modal='false'
               @close="cancelReport"
               append-to-body>
      <el-form :model="dataInfo"
               :rules="dataRule"
               ref="report-setting-dataForm"
               :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
        <el-form-item :label="$t('custom.report.businessid')"
                      prop="businessId">
          <el-input v-model="dataInfo.businessId"
                    disabled></el-input>
        </el-form-item>
        <el-form-item :label="$t('custom.report.language')"
                      prop="language">
          <el-select v-model="language">
            <el-option v-for="e in languageList"
                       :key="e.value"
                       :label="e.label"
                       :value="e.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="language === 1 || language === 2"
                      :label="$t('custom.report.model')">
          <textarea rows="4"
                    style="width:100%"
                    :placeholder="$t('custom.report.intercontent')"
                    v-model="content"></textarea>
        </el-form-item>
        <el-form-item v-if="language === 3"
                      :label="$t('custom.report.model')">
          <el-select v-model="datasetId"
                     filterable
                     clearable
                     collapse-tags
                     default-first-option>
            <el-option v-for="e in datasetList"
                       :key="e.id"
                       :label="e.name"
                       :value="e.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="language ===3"
                      :label="$t('custom.component.gadget.filterSetting')">
          <v-jsoneditor v-model="filterSetting"
                        :options="jsoneditorfilterSetting.options"
                        :plus="jsoneditorfilterSetting.plus"
                        :height="jsoneditorfilterSetting.height"
                        :indentation="jsoneditorfilterSetting.indentation"
                        :search="jsoneditorfilterSetting.search"
                        :path="jsoneditorfilterSetting.path"
                        :color="jsoneditorfilterSetting.color"
                        @error="onError"></v-jsoneditor>
        </el-form-item>

        <el-form-item :label="$t('custom.report.gadgetsetting')">
          <v-jsoneditor v-model="gadgetSetting"
                        :options="jsoneditorSetting.options"
                        :plus="jsoneditorSetting.plus"
                        :height="jsoneditorSetting.height"
                        :indentation="jsoneditorSetting.indentation"
                        :search="jsoneditorSetting.search"
                        :path="jsoneditorSetting.path"
                        :color="jsoneditorSetting.color"
                        @error="onError"></v-jsoneditor>
        </el-form-item>
        <!-- Bench Mark -->
        <!-- <el-form-item :label="$t('custom.report.benchMark')">
          <BenchMark />
        </el-form-item> -->
      </el-form>
      <div slot="footer"
           style="text-align-last: auto;">
        <el-button size="small"
                   @click="cancelReport">{{ $t('cancel') }}</el-button>
        <el-button type="primary"
                   size="small"
                   @click="saveReport">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import BenchMark from './bench-mark'

export default {
  components: {
    BenchMark
  },
  props: {
    showSetting: {
      type: Boolean,
      default: false
    },
    dataInfo: {
      type: Object,
      default: function () {
        return []
      }
    },
    updateGadget: {
      type: Function,
      default: null
    },
    resourceType: [String, Number]
  },
  data () {
    return {
      showQueryBuilder: this.$hasPermission('sys:tenant:model:allowmodelbuilder'),
      content: null,
      loading: false,
      showSettingInternal: this.showSetting,
      gadgetSetting: null,
      jsoneditorSetting: {
        options: { mode: 'tree' },
        plus: false,
        height: '400px',
        indentation: 2,
        search: true,
        color: 'red',
        path: false
      },
      jsoneditorfilterSetting: {
        options: { mode: 'tree' },
        plus: false,
        height: '400px',
        indentation: 2,
        search: true,
        color: 'red',
        path: false
      },
      language: 1, // 1 sql   2 grouvy   3 dataset
      languageList: [
        {
          label: 'SQL',
          value: 1
        },
        {
          label: 'Grouvy',
          value: 2
        },
        {
          label: 'Dataset',
          value: 3
        }
      ],
      datasetId: null,
      datasetList: [],
      filterSetting: {
        'sqlrule': '',
        'jsonrule': {
        }
      }
    }
  },
  computed: {
    dataRule () {
      return {
        businessId: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    showSetting (val) {
      this.showSettingInternal = val
      if (val) {
        this.getReportSetting()
      }
    }
  },
  created () { },
  methods: {
    getDatasetList () {

    },
    onError (value) {

    },
    donothing () {

    },
    getReportSetting () {
      var _self = this
      _self.loading = true
      _self.gadgetSetting = _self._.merge(_self.gadgetSetting, _self.dataInfo.gadgetSetting)
      const params = {
        // businessId: this.dataInfo.businessId,
        gadgetId: this.dataInfo.gadgetId,
        includeSql: true
      }
      this.$interface.reports.getReportSettingInfo(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        if (res.data) {
          this.dataInfo.businessId = res.data.businessId
          this.content = res.data.content
          this.datasetId = res.data.datasetId
          this.language = res.data.language
          this.gadgetSetting = _self._.merge(_self.dataInfo.gadgetSetting, res.data.gadgetSetting)
          this.filterSetting = _self._.merge(_self.filterSetting, res.data.filterSetting)

          _self.updateGadget(this.gadgetSetting)
        }
        _self.loading = false
      })
    },
    cancelReport () {
      this.showSettingInternal = false
      this.$emit('queryModelClosed', this.showSettingInternal)
    },
    saveReport () {
      if (this.language !== 3) {
        this.filterSetting = null
      }
      const params = {
        ...this.dataInfo,
        type: 1,
        content: this.content,
        gadgetSetting: this.gadgetSetting,
        gadgetId: this.dataInfo.gadgetId,
        datasetId: this.datasetId,
        language: this.language,
        filterSetting: this.filterSetting,
        resourceType: this.resourceType
      }
      this.$interface.reports.postReportSetting(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.content = null
        this.showSettingInternal = false
        this.$emit('queryModelClosed', this.showSettingInternal)
        return this.$message.success(res.msg)
      }).catch(() => {
      })
    },
    validateConfigForm () {
      return this.$refs['report-setting-dataForm'].validate()
    },
    showQueryModel () {
      this.showSettingInternal = !this.showSettingInternal
    }
  }
}
</script>

<style>
</style>
